<template>
    <div style="display: inline">
        <el-button :type="buttonType" icon="el-icon-plus" size="mini" @click="handleAdd"
            style="margin-bottom: 15px;">新增</el-button>
        <el-drawer :visible.sync="show" :close-on-press-escape="false" :title="`${form.id ? '修改' : '新增'}员工账号`"
            custom-class="employee-store-drawer" modal-append-to-body append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="130">
                <el-form-item label="员工名称" prop="nickname">
                    <el-input v-model="form.nickname" placeholder="请输入员工名称" />
                </el-form-item>
                <el-form-item label="账号" prop="nickname">
                    <el-input v-model="form.nickname" placeholder="请输入账号" />
                </el-form-item>
                <el-form-item label="密码" prop="nickname">
                    <el-input v-model="form.nickname" placeholder="请输入密码" />
                </el-form-item>
                <el-form-item label="角色" prop="nickname">
                    <el-radio v-model="radio" label="1">管理员</el-radio>
                    <el-radio v-model="radio" label="2">运营</el-radio>
                </el-form-item>
                <el-form-item label="状态" prop="nickname">
                    <el-switch v-model="form.user_status" active-text="启用" inactive-text="禁用" active-value="Y"
                        inactive-value="N" />
                </el-form-item>
            </el-form>
            <div class="footer">
                <el-button @click="show = false">取 消</el-button>
                <el-button @click="show = false">确 定</el-button>
            </div>
        </el-drawer>
    </div>
</template>
<script>

const checkPhone = (rule, value, callback) => {
    // 手机号验证
    if (!value) {
        callback()
    } else {
        const reg = /^1[3456789]\d{9}$/
        if (reg.test(value)) {
            callback()
        } else {
            return callback(new Error('请输入正确的手机号'))
        }
    }
}
const Model = {
    id: null,
    username: null,
    mobile: null,
    email: null,
    avatar: null,
    nickname: null,
    password: null,
    user_status: 'Y',
    role_id: null,
    store_id: null,
    is_super: 0,
    mid: null
}
const rules = {
    username: [
        { required: true, message: '请输入宠窝名称', trigger: 'blur' },
    ],
    nickname: [
        { required: true, message: '请输入宠窝地址', trigger: 'blur' },
    ],
    password: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
    mobile: [{ required: true, message: '请输入正确联系电话', validator: checkPhone, trigger: 'blur' }],
}

export default {
    name: 'addNest',
    props: {
        buttonType: {
            type: String,
            default() {
                return 'primary'
            }
        }
    },
    data() {
        return {
            rules,
            show: false,
            form: { ...{}, ...Model },
            dialogImageUrl: '',
            dialogVisible: false,
            radio: ""
        }
    },
    methods: {
        handleAdd: function () {
            this.form = { ...{}, ...Model }
            this.show = true
        },
        handleEdit: function (obj) {
            // this.form = { ...{}, ...obj }
            // this.getInfo(obj.id)
            this.show = true
        },
        getInfo(userId) {
            getEditUser(userId).then((resp) => {
                if (resp.data) {
                    const info = resp.data.info || {}
                    this.form = { ...info }
                    // const role_id = info.role_id
                    // this.$refs['roleSelect'].change(role_id)
                }
            })
        },
        handleSubmit: function () {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    const { code, msg } = await saveUser(this.form)
                    if (code !== 200) {
                        this.$message.error(msg || '系统服务异常')
                        return
                    }
                    this.show = false
                    this.$message.success('操作成功')
                    this.$emit('success')
                } else {
                    return false
                }
            })
        }
    }
}

</script>
<style lang="scss">
.employee-store-drawer {
    width: 600px !important;

    .el-drawer__title {
        border-top-left-radius: 10px !important;
    }

    .el-drawer__header {
        font-size: 16px !important;
        color: #333333 !important;
        font-weight: 700;
        text-align: center;
    }

    .el-drawer__body {
        border-bottom-left-radius: 10px !important;
        padding: 0 20px;
        overflow: scroll !important;
        padding-bottom: 50px;
    }

    .footer {
        position: absolute;
        width: 100%;
        bottom: 0;
        right: 0;
        height: 66px;
        opacity: 1;
        background: #fff;
        box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, .04), 0 2px 4px 0 rgba(0, 0, 0, .5);
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        z-index: 99;
    }

    .el-form-item {
        display: block;
        margin-right: 0;
        margin-bottom: 24px !important;
    }

    .el-form-item__label {
        width: 150px;
    }

    .el-form-item__content {
        width: calc(100% - 204px);
        display: inline-block;
    }

}
</style>